<template>
    <div :class="['item', todo.checked ? 'checked' : '']">
        <input type="checkbox" class="toggle" v-model="todo.checked" @click="toggleCheck">
        <span>{{ todo.content }}</span>
        <button class="deleteItem" @click="deleteItem"></button>
    </div>
</template>

<script>
export default {
    props: {
        todo: {
            type: Object,
            require: true
        }
    },
    methods: {
        toggleCheck() {
            console.log(this.todo.id);
        },
        deleteItem() {
            this.$emit('deleteItem', this.todo)
        }
    } 
}
</script>

<style lang="stylus" scoped>
.item {
    height 60px
    width 100%
    display flex
    justify-content space-between
    align-items center
    span {
        flex 2
        margin-left 20px
    }
    &:hover {
        .deleteItem:after {
            content 'X'
        }    
    }
    &.checked {
        span {
            color grey
            text-decoration line-through
        }
    }
    .toggle {
        text-align center
        -webkit-appearance none
        &:after {
            content url('./../assets/images/round.svg')
        }
        &:checked:after{
            content url('./../assets/images/done.svg')    
        }
    }    
    .deleteItem {
        width 40px
        height 40px
        color #cc9a9a
        font-size 20px
        appearance none 
        outline none
        border none 
        background-color transparent  
    }
}
</style>